//构建自己的ajax框架  2019-07-11
/*
paramsObj json类型参数
required params;
	type	：请求类型（string）
	url     ：请求地址（string）
	data    ：请求参数（json）
	success ：请求回调（function）

eg：
	window.frankAjax({
		type:'get',
		url:'ajaxEncapsulation.php',
		data:{
			usename:'test-frank';
			password:'test-123456'
		},
		success:function(res){
			console.log(res);
		}
	});
*/
//约定1：参数模仿jq的格式，也是一个json
//		json中必要字段有：
//		type请求类型，url请求地址，data请求参数，success请求回调
	// function frankAjax(paramsObj){
	// 	（1）先处理paramsObj参数，把这个json格式的参数换成必要的格式
	// 		a.如果是get请求，将参数拼接到url后面
	// 		{...}->[...]->join()->url+join()
	// 		先把json->数组->join方法拼接成字符串->url+join()
	// 		b.如果是post请求，则构建formData参数对象
	// 			formData.append(...,...);
		
	// 	（2）准备xhr对象，然后实现onreadystatechange,准备发送请求
	// 			xhr.onreadystatechange = function(){...};

	// 	（3）准备open()
	// 			xhr.open(..., ..., true);
		
	// 	（4）准备send()
	// 			if(paramsObj.type == 'get'){ xhr.send(null); }
	// 			else if(paramsObj.type == 'post'){ xhr.send(formData); }
	// }
(function(){
	function frankAjax(paramsObj){
			//准备参数
			if(paramsObj.type.toLowerCase() == 'get'){
				// console.log(paramsObj.data);
				var arr=[];
				// 字符串操作拼接{usename: "test-frank", password: "test-123456"} 转化为 ["usename=test-frank", "password=test-123456"] 数组
				for(var pro in paramsObj.data){
					var str = pro + '=' + paramsObj.data[pro]
					arr.push(str);
				}
				var canshuStr = arr.join('&');//usename=test-frank&password=test-123456
				// console.log(canshuStr);

				//拼接到url后面
				paramsObj.url += paramsObj.url.indexOf('?')==-1
				? '?'+canshuStr
				: '&'+canshuStr;
				
				// console.log(paramsObj.url);
			}else if(paramsObj.type.toLowerCase() == 'post'){
				var formData = new FormData();
				for(var pro in paramsObj.data){
					formData.append(pro,paramsObj.data[pro]);
				}
			}else{
				console.log('请求类型错误');
			}

			//准备xhr
			var xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4){
					if(xhr.status == 200){
						//当请求回来后，调用success字段
						paramsObj.success(JSON.parse(xhr.responseText));
					}
				}
			};

			//预定url地址
			xhr.open(paramsObj.type,paramsObj.url,true);
			//发送请求
			if(paramsObj.type.toLowerCase() == 'get'){
				xhr.send(null);
			}else if(paramsObj.type.toLowerCase() == 'post'){
				xhr.send(formData);
			}else{
				console.log('请求类型错误');
			}
		}

		//IIFE(立即调用函数表达式)是一个在定义时就会立即执行的JavaScript 函数。
		//通过IIFE将框架文件包裹
		//并通过window对象进行绑定
		window.frankAjax = frankAjax;
}())
	